<template>
  <div class="addBlog">
    <div class="addMain">
      <div class="row">
        <div class="text">博客标题：</div>
        <div class="iptBox">
          <input type="text" v-model="myObj.title"/>
        </div>
      </div>

      <div class="row rowAuthor">
        <div class="text">作者：</div>
        <div class="iptBox">
          <input type="text" v-model="myObj.author"/>
        </div>
      </div>

      <div class="row">
        <div class="text">分类：</div>
        <div class="iptBox">
          <select v-model="myObj.classify">
            <option v-for="item in classArr" :key="item.id">{{item.classname}}</option>
          </select>
        </div>
      </div>

      <div class="row rowArea">
        <div class="text">博客内容：</div>
        <div class="iptBox">
          <textarea v-model="myObj.content"></textarea>
        </div>
      </div>

      <div class="row">
        <div class="text"></div>
        <div class="iptBox">
          <button @click="onSubmit">发表博客</button>
        </div>
      </div>
    </div>

    <div v-show="myObj.title || myObj.content || myObj.classify || myObj.author">
      <h1 class="blShowBox">博客预览</h1>
      <blogItem :itemObj="myObj"/>
    </div>

  </div>
</template>

<script>
import blogItem from '@/components/blogItem'
export default {
  components: {
    blogItem
  },
  data () {
    return {
      myObj: {
        title: '',
        posttime: new Date().getTime() / 1000,
        classify: '',
        author: '',
        content: ''
      },
      classArr: []
    }
  },
  methods: {
    getClassify () {
      this.axios({
        url: 'https://ku.qingnian8.com/dataApi/blog/classBlog.php'
      }).then(res => {
      // console.log(res)
        this.classArr = res.data
      })
    },
    onSubmit () {
    // if(this.myObj.title=='' || this.myObj.classify=='' || this.myObj.author=='' || this.myObj.content==''){
    //   alert('请完整填写!')
    //   return;
    // }
      for (const item in this.myObj) {
        if (this.myObj[item] == '') {
          alert('请完整填写!')
          return
        }
      }
      this.pushData()
      alert('发表成功返回首页')
      this.$router.push('/')
    },
    pushData () {
      this.axios({
        url: 'https://ku.qingnian8.com/dataApi/blog/addBlog.php',
        params: this.myObj
      }).then(res => {
        console.log(res)
      })
    }
  },
  created () {
    this.getClassify()
  }
}
</script>

<style lang="less" scoped>
input,textarea,select{ outline: none;}
.addBlog {
  padding: 50px 30px;
  min-height: 830px;
}
.addMain {
  padding: 0 80px;
  font-size:18px;
  color:#333;
  .row{
    padding:10px 0;
    display: flex;
    align-items: center;
    .text{
      width:20%;
      text-align:right;
      padding-right:10px;
    }
    .iptBox{
      width:80%;
      input,textarea{
        width:100%;
        padding:10px;
        height: 38px;
        border:1px solid #ccc;
        border-radius: 3px;
        transition: 0.3s;
        font-size:16px;
        color:#666;
        &:focus{
          border-color:#41B883;
          box-shadow:0 0 10px rgba(65,184,131,0.3);
        }
      }
      select{
        width:50%;
        height: 38px;
        border:1px solid #ccc;
        border-radius: 3px;
        padding:0 10px;
        font-size:16px;
        color:#333
      }
      textarea{
        height: 150px;
      }
      button{
        width:50%;
        height: 38px;
        background: #41B883;
        color:#fff;
        border:none;
        border-radius: 3px;
        cursor: pointer;
        transition: 0.3s;
        &:hover{
          background: #2F6F52;
        }
      }
    }
  }
  .rowArea{
    align-items:flex-start;
  }
}

.blShowBox{ font-size:22px; color:#555; padding:50px 0 30px; text-align: center; border-top:1px solid #e4e4e4;margin-top:30px;}
</style>
